import { ElButton, ElSpace, ElTag } from 'element-plus'
import { defineComponent } from 'vue'
import { VxeGrid } from 'vxe-table'

import type { IOperLogPageItem } from '@/apis'
import { usePageHeight } from '@/hooks'

import { DetailDialog } from './components'
import { bizStatusObj, bizTypeObj, useGrid } from './hooks'

export default defineComponent({
  setup() {
    const gridHook = useGrid()
    const { pageHeightPx } = usePageHeight()

    return {
      ...gridHook,
      pageHeightPx
    }
  },
  render() {
    return (
      <div
        style={{
          height: this.pageHeightPx
        }}
      >
        <VxeGrid ref={(e: any) => (this.gridRef = e)} {...this.gridConfig}>
          {{
            toolbar_buttons: () => (
              <ElSpace>
                <ElButton
                  v-permission="'monitor:operLog:remove'"
                  type="danger"
                  plain
                  disabled={this.selectedIds.size === 0}
                  onClick={this.handleDel}
                >
                  删除
                </ElButton>
                <ElButton
                  v-permission="'monitor:operLog:remove'"
                  type="danger"
                  plain
                  onClick={this.handleClear}
                >
                  清空
                </ElButton>
                <ElButton
                  v-permission="'monitor:operLog:export'"
                  type="primary"
                  plain
                  onClick={this.handleExport}
                >
                  导出
                </ElButton>
              </ElSpace>
            ),
            columns_type: ({ row }: { row: IOperLogPageItem }) => (
              <ElTag type={this.getBizTypeTagType(row.bizType)}>
                {bizTypeObj[row.bizType]}
              </ElTag>
            ),
            columns_status: ({ row }: { row: IOperLogPageItem }) => (
              <ElTag type={row.status === '1' ? 'danger' : undefined}>
                {bizStatusObj[row.status]}
              </ElTag>
            ),
            columns_operation: ({ row }: { row: IOperLogPageItem }) => (
              <ElSpace>
                <ElButton
                  type="primary"
                  size="small"
                  link
                  onClick={() => this.handleViewDetail(row)}
                >
                  详情
                </ElButton>
              </ElSpace>
            )
          }}
        </VxeGrid>
        {/* 详情弹窗 */}
        <DetailDialog ref={(e: any) => (this.detailDialogRef = e)} />
      </div>
    )
  }
})
